<template>
    <div class="search">
        <div class="nav">
            <van-nav-bar title="搜索产品">
                <template #left>
                    <van-icon name="arrow-left" size="24" color="#999" @click="back"/>
                </template>
            </van-nav-bar>
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
            <van-tabs @click="onClick">
                <van-tab title="洲"></van-tab>
                <van-tab title="季节"></van-tab>
            </van-tabs>
            <!--  如果点击洲显示这个 -->
            <div class="countries" v-show="tab == '洲'">
                <span v-for="(item,index) in continents" :key="index" @click="goCountry(index)" :class="{active:index==chooseInd1}">{{item}}</span>
            </div>
            <!--  如果点击季节显示这个 -->
            <div class="countries" v-show="tab == '季节'">
                <span v-for="(item,index) in seasons" :key="index" @click="goSeason(index)" :class="{active:index==chooseInd2}">{{item}}</span>
            </div>
        </div>
        <div class="content">
            <!--  如果点击洲显示这个 -->
            <div class="citys" v-show="tab == '洲'">
                <p v-for="item in countryInfo" :key="item.country" @click="goScene(item.country)">{{item.country}}</p>
            </div>
            <!--  如果点击季节显示这个 -->
            <ul class="season" v-show="tab == '季节'">
                <li v-for="item in seasonInfo" :key="item.product_id" @click="goDetail(item.product_id)">
                    <img :src="item.pro_pic_url" alt="">
                    <p>{{item.pro_title}}</p>
                    <p>
                        <span>{{item.country}}</span>|
                        <span>{{item.routing_data}}天{{item.routing_nigth}}晚</span>
                        <span><van-icon name="like-o" />{{item.collection_num}}</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { NavBar,Search,Tab, Tabs,Toast  } from 'vant';

Vue.use(NavBar);
Vue.use(Search);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Toast);
export default {
    data () {
        return {
            //输入框的值
            value:'',
            // 洲的数据
            tab:'洲',
            continents:['欧洲','亚洲','大洋洲','非洲','北美洲','南美洲'],
            // 季节的数据
            seasons:['春意阑珊','盛夏果实','秋来秋去','冬之恋曲'],
            chooseInd1:0,
            chooseInd2:0,
            isActive:true,
            countryInfo:[],
            seasonInfo:[]
        };
    },

    components: {},

    computed: {},

    created(){
        this.$http.get("http://www.51houniao.com/requirement/destination/countries/"+this.continents[this.chooseInd1])
            .then(res=>{
                this.countryInfo=res
        })
    },

    mounted() {},

    methods: {
        // 点击洲与季节两个选项触发事件
        onClick(name, title) {
            this.tab=title
            if(title == '季节'){
                // 请求体
                let reqdata={
                    "request_season": ["春意阑珊"], 
                    "product_type": 1
                }
                // 发送请求
                this.$http.post('http://www.51houniao.com/requirement/request/getMatchedProducts',reqdata)
                .then(res=>{
                    this.seasonInfo=res.matchedProducts
                    // console.log(this.seasonInfo)
                })
            }
        },
        // 改变选中的洲的颜色,并请求国家数据,请求到了之后渲染
        goCountry : function(index){
            this.chooseInd1 = index;
            // 依据选中的洲发送请求
            this.$http.get("http://www.51houniao.com/requirement/destination/countries/"+this.continents[this.chooseInd1])
            .then(res=>{
                this.countryInfo=[],
                this.countryInfo=res
            })
        },
        // 点击季节下面的分选项请求数据并渲染
        goSeason(index){
            this.chooseInd2 = index;
            let reqBody2={
                    //季节 
                    "request_season": [this.seasons[this.chooseInd2]], 
                    "product_type": 1
                }
                // 发送请求
                this.$http.post('http://www.51houniao.com/requirement/request/getMatchedProducts',reqBody2)
                .then(res=>{
                    this.seasonInfo=res.matchedProducts
                })
        },
        // 页面跳转到/customized_product，并将后面请求体需要的数据通过地址栏传过去
        goScene(country){
            this.$router.push('/customized_product/'+country+'/'+this.continents[this.chooseInd1])
        },
        // 根据输入框的内容查询跳转页面并发送请求请求数据
        onSearch(){
            // 输入框中文判断
            // let reg = /[^\u4E00-\u9FA5]/g
            // if(!reg.test(this.value)){
            if(this.value){
                this.$router.push('/customized_product/'+this.value+'/'+this.value)
            }else{
                alert('请输入关键字')
                return
            }
        },
        //季节里面的产品点击跳转详情页
        goDetail(id){
            this.$router.push('/detail/'+id)
        },
        // 返回上一页
        back(){
            this.$router.go(-1)
        }
    }
}

</script>
<style scoped>
.van-search{
    padding:0px;
}
.search{
    background: #f2f2f2;
}
.nav{
    width:100%;
    position:fixed;
    top:0;
}
.content{
    margin-top:190px;
}
.countries{
    line-height:50px;
    padding:0 28px;
    font-size:14px;
    color:white;
    background: #ddd;
}
.countries span{
    display: inline-block;
    margin-right:8px;
    padding:3px 5px;
    line-height:20px;
    border-radius: 5px;
}
.countries span:nth-of-type(6){
    margin-right:0;
}
.active{
    background: #333;
}
.citys{
    padding:0 20px;
}
.citys p{
    padding:5px 8px;
    border:1px solid #333;
    float:left;
    margin:10px 15px;
    border-radius: 15px;
}
.season{
    margin-bottom:100px;
}
.season li{
    text-align: center;
    margin:20px;
    font-size:14px;
}
.season li img{
    width:330px;
    height:186px;
}
.season p:nth-of-type(2) span{
    display: inline-block;
    margin:0 10px;
}
</style>